<template>
	<view class="comPay" @click.stop="hidePay">
		<view class="payBox">
			<view class="top">
				<view class="t">
					<text class="tit">{{$t('index.czsdwtdc')}}</text>
					<view class="bag">
						<text>{{$t('index.ye')}}: </text>
						<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
						<text>{{parseInt(userinfo.money)}}</text>
					</view>
					<text>{{$t('index.ndyebg')}}:)</text>
				</view>
				<view class="moneyList">
					<view @click.stop="newPay(index)" class="item" :class="item.is_yellow==1?'yellow':''"
						v-for="(item,index) in systemRecharge">
						<!-- <image :src="active==index?'https://siha.vxmeng.com/static/my/cz-selected-bg.png':'https://siha.vxmeng.com/static/my/cz-bg.png'" mode=""></image> -->
						<image :src="'https://siha.vxmeng.com/static/my/cz-bg.png'" mode=""></image>
						<view class="money">
							<text>{{item.money}}</text>
							<text>{{$t('index.y')}}</text>
						</view>
						<!-- <text class="sidou">{{item.dou_money}}{{$t('index.sidou')}}</text> -->
						<text class="sidou"></text>
						<text class="zs">{{lang_type == 1 ? item.remark:item.eng_remark}}</text>
						<text class="tr" v-if="item.blurb">{{lang_type == 1 ? item.blurb:item.eng_blurb}}</text>
					</view>
				</view>
				
				<!-- #ifdef APP-PLUS -->
				<view class="payList">
					<view :class="activePay==0?'on':''" @click.stop="activePay=0" class="item">
						<image src="https://siha.vxmeng.com/static/pay/wx.png" mode="widthFix"></image>
						<text>{{$t('index.wx')}}</text>
					</view>
					<view :class="activePay==1?'on':''" @click.stop="activePay=1" class="item">
						<image src="https://siha.vxmeng.com/static/pay/zfb.png" mode="widthFix"></image>
						<text>{{$t('index.zfb')}}</text>
					</view>
				</view>
				<!-- #endif -->
			</view>
			
			<view class="btn">
				<view>{{$t('index.wxts')}}:</view>
				<view>1.{{$t('common.bcczjx')}}</view>
				<view>2.{{$t('common.czjewftx')}}</view>
				<view>3.{{$t('common.czjeyjyx')}}</view>
<!-- 				<view class="l">
					<view class="qian">
						{{$t('gdjj.gj')}}：<text>{{systemRecharge[active].money}}</text>{{$t('index.y')}}
					</view>
				</view>
				<text class="r" @click.stop="pay">{{$t('index.ljgm')}}</text> -->
				<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
					<button class="kf" open-type="contact">
						<image src="https://siha.vxmeng.com/static/my/kf.png" mode="widthFix"></image>
					</button>
				
					<comLack v-if="isLack" @hide="hideLack" value="500"></comLack>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comPay",
		props: {
			title: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				lang_type: 1,
				active: 1,
				activePay: 0,
				systemRecharge: [],
				userinfo: {}
			};
		},
		mounted() {
			setTimeout(()=>{
				if(this.$music.bgmInstance){
					this.$music.bgmInstance.destroy();
					this.$music.bgmInstance = null;
				}
			}, 0)
			this.getSystemRecharge()
			this.getUserinfo()
			this.lang_type = this.$tools.getStore('onLanguage') == 'zh-Hans'?1:2
		},
		methods: {			
			async newPay(index){
				let that = this
				this.active=index
				let systemInfo = uni.getSystemInfoSync();
				let platform = systemInfo.platform;
				let device_type = 1
				if (platform === 'android') {
				    device_type = 1
				} else if (platform === 'ios') {
					//TODO 后面可能开启,微信小程序官方要求禁止IOS自然流用户支付
					this.$tools.showTx('该功能IOS暂不支持')
					return
				    device_type = 2
				} else {
				    device_type = 3
				}
				const res = await this.$myRequest({
					url: 'api/user/doAddUserRecharge',
					data: {
						system_recharge_id: this.systemRecharge[this.active].id,
						// #ifdef MP-WEIXIN
						type: 1,
						// #endif
						// #ifdef MP-TOUTIAO
						type: 2,
						// #endif
						// #ifdef H5
						type: 3,
						// #endif
						device_type:device_type
					}
				})
				if (res.code == 1) {
					// #ifdef H5
					this.aliPay = res.data
					setTimeout(function() {
						document.forms['alipay_submit'].submit()
					}, 1000)
					return
					// #endif
					// #ifdef MP-TOUTIAO
					 tt.requestOrder({
					    data: res.data.data_value, // 请勿在前端对data做任何处理
					    byteAuthorization: res.data.byteAuthorization_value, // 请勿在前端对byteAuthorization做任何处理
					    success: (res0) => {
					      console.log('成功', res0);
						  tt.getOrderPayment({
						     orderId: res0.orderId, // 请勿在前端对data做任何处理
						     success: (res1) => {
								that.notifyXnOrder()
								console.log('requestVirtualPayment success', res1)
								that.$tools.showTx(that.$t('index.czcg'))
						     },
						     fail: (res2) => {
						       console.log(res2)
							   that.$tools.showTx(that.$t('index.yhqxzf'))
						     },
						   });
					    },
					    fail: (res3) => {
					      console.log(res3)
					    },
					  });
					return
					// #endif
					if(device_type==1){
					  wx.requestVirtualPayment({
						signData: JSON.stringify({
						  offerId: '1450217770',
						  buyQuantity: parseInt((this.systemRecharge[index].money*100).toFixed(0)),
						  // buyQuantity: 1,
						  env: 0,
						  currencyType: 'CNY',
						  // productId: 'testproductId',
						  // goodsPrice: Number(this.systemRecharge[index].money)*100,
						  outTradeNo: res.data.order_id,
						  attach: 'testdata',
						}),
						paySig: res.data.pay_sig,
						signature: res.data.signature,
						mode: 'short_series_coin',
						success(res) {
							that.notifyXnOrder()
							console.log('requestVirtualPayment success', res)
							that.$tools.showTx(that.$t('index.czcg'))
						},
						fail({ errMsg, errCode }) {
						  // console.error(errMsg, errCode)
						  that.$tools.showTx(that.$t('index.yhqxzf'))
						},
					  })
					}else{
						//调用微信官方支付接口弹出付款界面,输入密码扣款
						wx.requestPayment({
							timeStamp: res.data.timeStamp, //后端返回的时间戳
							nonceStr: res.data.nonceStr, //后端返回的随机字符串
							package: res.data.package, //后端返回的prepay_id
							signType: res.data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
							paySign: res.data.paySign, //后端返回的签名
							success:(res1)=> {
								console.log('用户支付扣款成功', res1)
								this.$tools.showTx(this.$t('index.czcg'))
								this.$emit('hidePay')
							},
							fail:(res1)=> {
								console.log('用户支付扣款失败', res1)
								this.$tools.showTx(this.$t('index.yhqxzf'))
							}
						})
					}
				}
			},
			async notifyXnOrder(){
				const res = await this.$myRequest({
					url: 'addons/epay/index/notifyXnOrder',
					data: {}
				})
				if (res.code == 1) {
					this.$emit('hidePay')
				}
			},
			async pay(index) {
				this.active = index
				const res = await this.$myRequest({
					url: 'api/user/doAddUserRecharge',
					data: {
						system_recharge_id: this.systemRecharge[this.active].id,
						type: 1
					}
				})
				if (res.code == 1) {
					console.log(res)
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: res.data.timeStamp, //后端返回的时间戳
						nonceStr: res.data.nonceStr, //后端返回的随机字符串
						package: res.data.package, //后端返回的prepay_id
						signType: res.data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
						paySign: res.data.paySign, //后端返回的签名
						success:(res1)=> {
							console.log('用户支付扣款成功', res1)
							this.$tools.showTx(this.$t('index.czcg'))
							this.$emit('hidePay')
						},
						fail:(res1)=> {
							console.log('用户支付扣款失败', res1)
							this.$tools.showTx(this.$t('index.yhqxzf'))
						}
					})
				}
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					method: 'GET',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			async getSystemRecharge() {
				const res = await this.$myRequest({
					url: 'api/system/getSystemRecharge',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.systemRecharge = res.data
				}
			},
			hidePay() {
				this.$emit('hidePay', 1)
			}
		}
	}
</script>

<style lang="less" scoped>
	.comPay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		min-height: 100vh;
		overflow-y: scroll;
		color: #fff;
		// background: linear-gradient(270deg, rgba(0, 0, 0, 0.7569) 0%, rgba(0, 0, 0, 0.6039) 82%, rgba(0, 0, 0, 0) 100%);
		background-color: rgba(0, 0, 0, .5);
		z-index: 111111111111;
		
		.top{
			height: calc(100vh - 60px);
			overflow-y: auto;
			overflow-x: hidden;
			&::-webkit-scrollbar{
				display: none;
			}
		}

		.payBox {
			// width: 50%;
			width: 40%; //4-30
			min-height: 100vh;
			padding-left: 42px;
			flex-direction: column;
			overflow: hidden;
			background: linear-gradient(270deg, rgba(0, 0, 0, 0.7569) 0%, rgba(0, 0, 0, 0.6039) 82%, rgba(0, 0, 0, 0) 100%);
			position: absolute;
			top: 0px;
			right: 0px;
			.t {
				width: 100%;
				display: flex;
				flex-direction: column;
				color: #d8d8d8d;
				justify-content: space-between;
				padding: 14px 0 5px 0;
				font-size: 14px;
				.tit{
					text-align: center;
					font-size: 16px;
					margin-right: 20px;
				}
				.bag{
					display: flex;
					margin-top: 5px;
					// margin-bottom: 5px;
					align-items: center;
				}
				image {
					width: 20px;
				}
			}

			.moneyList {
				width: 50vw;
				margin-top: 10px;
				// padding-right: 12px;
				// overflow-x: scroll;
				// overflow-y: hidden;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				position: relative;
				left: -12px;//4-30
				// flex-direction: column;//4-30
				// left: -150px;//4-30
				
				&::-webkit-scrollbar{
					display: none;
				}

				.item {
					width: 86px;
					// height: 196rpx;
					padding-top: 10px;
					// margin: 4px 16px;
					margin: 20px 20px;
					border-radius: 10px;
					font-size: 12px;
					
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					// opacity: .6;
					opacity: .9;
					
					transform: scale(1.2);
					transform-origin: 0 0;
					
					// &:last-child{
					// 	.zs{
					// 		font-size: 9px;
					// 	}
					// }
					
					&.on{
						opacity: 1;
					}
					
					>image{
						width: 86px;
						height: 96px;
						position: absolute;
						top: 0;
						left: 0;
						z-index: -1;
						border-radius: 10px;
					}

					.money {
						position: relative;//4-30加
						top: 16rpx;//4-30加
						text {
							&:nth-child(1) {
								font-size: 22px;
								font-weight: bold;
							}
						}
					}

					.sidou {
						margin: 6px 0;
					}

					.zs {
						width: 86px;
						height: 32px;
						text-align: center;
						border-radius: 0px 0px 10px 10px;
						background: linear-gradient(270deg, #5F58FD 0%, #62B6FC 100%);
						display: inline-flex;
						align-items: center;
						justify-content: center;
						font-size: 10px;
						margin-top: 16rpx; //4-30加
					}
					.tr{
						position: absolute;
						right: 0;
						top: 0;
						display: flex;
						align-items: center;
						border-bottom-left-radius: 5px;
						border-top-right-radius: 5px;
						text-align: center;
						font-size: 9px;
						padding: 2px 4px;
						height: 14%;
						background: linear-gradient(284deg, #62B6FC -4%, #5F58FD 77%, #5F58FD 99%);						
					}
					&.yellow{
						background-color: rgba(255,255,0, .6);
						border-image: linear-gradient(180deg, rgba(255, 218, 96, 0.95) 0%, rgba(216, 216, 216, 0.1) 149%) 1;
						.tr{
							background: linear-gradient(128deg, #FFB400 34%, #E24800 105%);
						}
						.bot{
							background: linear-gradient(108deg, #FFDE4E -3%, rgba(#FF7C0D, 1) 80%, rgba(#FFDE7A, .6) 147%);
						}
					}
				}
			}

			.mtit {
				display: inline-flex;
				width: 80vw;
				padding: 15px 0;
				font-size: 14px;
			}

			.payList {
				.item {
					width: 330px;
					height: 36px;
					border-radius: 8px;
					background: rgba(57, 57, 57, 0.52);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 16px;
					color: #fff;
					margin-top: 10px;
					image {
						width: 24px;
					}

					&.on {
						background: linear-gradient(270deg, rgba(95, 88, 253, 0.6) 0%, rgba(98, 182, 252, 0.6) 100%);
						border: 1px solid rgba(136, 174, 249, 0.8);
					}
				}
			}

			.btn {
				width: 330px;
				height: 60px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				overflow: auto;
				// padding: 10px 0;
				// position: fixed;
				// bottom: 0;
				position: relative;
				bottom: 30px;
				
				.kf{
					position: fixed;
					right: 0;
					bottom: 25rpx;
					width: 60rpx;
					height: 45rpx;
					box-sizing: border-box;
					background: rgba(71, 71, 71, 0.3);
					border: 2rpx solid #ffffff;
					border-radius: 45rpx 0 0 45rpx;
					border-right: none;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 30rpx;
					}
				}
				&::-webkit-scrollbar{
					display: none;
				}
				>view {
					width: 100%;
					font-size: 11px;
				}
				.l {
					.qian {
						text {
							font-size: 24px;

							&:nth-child(2) {
								font-size: 12px;
							}
						}
					}

					>text {
						font-size: 12px;
						color: #999;
					}
				}

				.r {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 137px;
					height: 40px;
					border-radius: 30px;
					color: #fff;
					font-size: 16px;
					/* 渐变/渐变2 */
					background: linear-gradient(113deg, #00A6FE 18%, #854EFF 86%);
				}
			}
		}
	}
</style>